<!DOCTYPE html>
<html>
<head>
    <title>SQL Formatter Demo</title>
    <style>
        #sql-input, #formatted-sql {
            width: 100%;
            height: 200px;
            margin: 10px 0;
            font-family: monospace;
        }
        #formatted-sql {
            white-space: pre-wrap;
        }
    </style>
    <!-- 引入 sql-formatter 库 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/sql-formatter@8.1.0/dist/sql-formatter.min.js"></script>-->
    <script src="./script/sql-formatter.min.js"></script>
<!--   npm 安装 npm install sql-formatter     -->
</head>
<body>
    <h1>SQL Formatter Demo</h1>
    <textarea id="sql-input" placeholder="Enter SQL here..."></textarea>
    <button onclick="formatSQL()">Format SQL</button>
    <h2>Formatted SQL</h2>
    <div id="formatted-sql"></div>

    <script>
        function formatSQL() {
            const input = document.getElementById('sql-input').value;
            const formattedSQL = sqlFormatter.format(input, {
                language: 'sql',  // 设置 SQL 语言方言
                indent: '    ',    // 设置缩进为4个空格
                uppercase: true,
                linesBetweenQueries: 2
            });
            document.getElementById('formatted-sql').textContent = formattedSQL;
        }
    </script>
</body>
</html>

